<template>
<div :class="[$style.container]">
  <el-row :gutter="24">
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">业务编号</span> <span :class="[$style.text]">{{t('businessKey')}}</span></el-col>
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">流程代码</span> <span :class="[$style.text]">{{t('processDefKey')}}</span></el-col>
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">流程名称</span> <span :class="[$style.text]">{{t('processInstanceName')}}</span></el-col>
    <el-col :span="8" :class="[$style.col]">
      <span :class="[$style.label]">发起文档</span>
      <span :class="[$style.text]">{{t('variables', 'applyDoc')}}</span>
      <span :class="[$style.suffix]">
        <span :class="[$style.action]" @click="onForword"><i class="el-icon-position"></i></span>
        <!-- <span :class="[$style.action]"><i class="el-icon-view"></i></span>
        <span :class="[$style.action]"><i class="el-icon-download"></i></span> -->
      </span>
    </el-col>
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">当前节点</span> <span :class="[$style.text]">{{t('currentNodeName')}}</span></el-col>
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">发起人</span> <span :class="[$style.text]">{{t('applyByName')}}</span></el-col>
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">流程状态</span> <span :class="[$style.text]">{{t('status') | transcode('processStatus')}}</span></el-col>
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">发起时间</span> <span :class="[$style.text]">{{t('startTime')}}</span></el-col>
    <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">结束时间</span> <span :class="[$style.text]">{{t('endTime')}}</span></el-col>
    <el-col :span="24" :class="[$style.col]"><span :class="[$style.label]">发起说明</span> <span :class="[$style.text]">{{t('variables', 'remark')}}</span></el-col>
    <template v-if="action === 'doc_perms'">
      <el-col :span="24" :class="[$style.col]"><span :class="[$style.label]">申请权限</span> <span :class="[$style.text]">{{p(t('variables', 'umask'))}}</span></el-col>
    </template>
    <template v-if="action === 'doc_update'">
      <el-col :span="12" :class="[$style.col]">
        <span :class="[$style.label]">更新文档名称</span>
        <span :class="[$style.text]" :title="t('variables', 'name')">{{t('variables', 'name')}}</span>
        <span :class="[$style.suffix]">
          <span :class="[$style.action]" @click="onPreview" v-if="canPreview"><i class="el-icon-view"></i></span>
          <span :class="[$style.action]" @click="onDownload"><i class="el-icon-download"></i></span>
        </span>
      </el-col>
      <el-col :span="12" :class="[$style.col]"><span :class="[$style.label]">更新文档大小</span>
      <span :class="[$style.text]">{{t('variables', 'size') | size}}</span></el-col>
    </template>
    <template v-if="action === 'doc_add'">
      <el-col :span="8" :class="[$style.col]">
        <span :class="[$style.label]">上传文档名称</span>
        <span :class="[$style.text]" :title="t('variables', 'name')">{{t('variables', 'name')}}</span>
        <span :class="[$style.suffix]">
           <span :class="[$style.action]" @click="onPreview" v-if="canPreview"><i class="el-icon-view"></i></span>
          <span :class="[$style.action]" @click="onDownload"><i class="el-icon-download"></i></span>
        </span>
      </el-col>
      <el-col :span="8" :class="[$style.col]"><span :class="[$style.label]">上传文档大小</span> <span :class="[$style.text]">{{t('variables', 'size') | size}}</span></el-col>
    </template>
  </el-row>
</div>
</template>

<script lang="ts">

import { getDocByPath } from '@/api/doc'
import { getUmaskText } from '@/config/acl'
import { canPreview } from '@/config/content-type'
import { AppModule } from '@/store'
import { downloadFromUrl } from '@/utils/download'
import { expr } from '@/utils/url'
import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
@Component
export default class AuditInfo extends Vue {
  @Prop() data!: any

  @AppModule.State properties!: any

  get previewUrl () {
    return expr(this.properties?.deploy?.previewWeb || '') + '/preview'
  }

  get onlyOfficeUrl () {
    return expr(this.properties?.deploy?.onlyOfficeWeb || '')
  }

  t (...path: string[]) {
    let ctx = this.data
    path.some(key => {
      if (Object.prototype.toString.call(ctx) === '[object Object]') {
        ctx = ctx[key] || '-'
        return false
      } else {
        ctx = '-'
        return true
      }
    })
    return ctx
  }

  p (uamsk: number) {
    return getUmaskText(uamsk)
  }

  get action () {
    return this.data?.variables?.action
  }

  get canPreview () {
    const { url, name } = this.data?.variables || {}
    return canPreview(name)
  }

  onForword () {
    const p = this.data?.variables?.applyDoc
    if (p) {
      getDocByPath(p).then(data => {
        if (!data) {
          this.$message.error('文档不存在')
          return
        }
        const id = data?.type !== 'dir' ? data?.parentId : data?.id

        this.$router.push({ path: `/ent/${data.ownId}/docs`, query: { id } })
      })
    }
  }

  onDownload () {
    const { url, name } = this.data?.variables || {}
    const response = {
      'content-disposition': `attachment; filename=${encodeURIComponent(name)}`
    }
    this.$oss.signatureUrl(url, { response }).then(url => {
      downloadFromUrl(url)
    })
  }

  onPreview () {
    const { url, name } = this.data?.variables || {}
    const response = {}
    this.$oss.signatureUrl(url, { response }).then(url => {
      const query = {
        src: url,
        encrypt: this.properties?.deploy?.encryptFile ? '1' : '0',
        userid: this.$auth?.principle?.user?.id,
        username: this.$auth?.principle?.user?.username,
        onlyOfficeUrl: this.onlyOfficeUrl,
        filename: name
      }
      const q = Object.entries(query).map(([k, v]) => {
        return encodeURIComponent(k) + '=' + encodeURIComponent(v)
      }).join('&')
      const src = this.previewUrl + '?' + q
      window.open(src)
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  font-size: 12px;
}

.col {
  height: 48px;
  line-height: 48px;
  display: flex;
}

.label {
  color: $text-secondary-color;
  margin-right: 8px;
  flex: 0 0 auto;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.suffix {
  flex: 0 0 auto;
  margin-left: 8px;
}

.action {
  margin: 0 4px;
  color: $color-primary;
  &:hover {
    opacity: .8;
    cursor: pointer;
  }
}
</style>
